<extend name="./Application/Home/View/Layouts/application.html"/>

<block name="content">

    <div class="clearsH"></div>

    <div class="all">
        <ul class="menu">
            <li><a href="javascript:void(0);">商品分类</a></li>
            <li><a href="#" id="list"><i class="fa fa-th"></i></a></li>
        </ul>
    </div>

    <div class="products">

        <volist name="categories" id="category">
            <div class="panel-box">
                <h4 class="panel-title">
                    <a class="link" href="javascript:;"><span class="fa fa-medkit"></span>
                        {{$category.name}}</a>
                </h4>
                <div class="panel-body" style="display: none;">

                    <volist name="category.children" id="child">
                        <a class="link" href="{{:U('Index/show',['id'=>$child[id]])}}">
                            &nbsp;&nbsp;&nbsp;&nbsp;|--{{$child.name}}
                        </a>
                    </volist>

                </div>
            </div>
        </volist>

        <br>
        <br>
        <br>
    </div>
</block>

<block name="js">
    <script>
        //展开与隐藏
        $(function () {
            $('.panel-title').click(function () {
                $(this).next().toggle().parents('.panel-box').siblings().children('.panel-body').hide();
            });
        });
    </script>
</block>